<script setup>
import { ref, onMounted } from 'vue'
import { getRankList } from '@/api/user'
import { showToast } from 'vant'
import { gsap } from 'gsap'

const rankList = ref([])
const loading = ref(true)

const getRank = async () => {
  try {
    const res = await getRankList()
    rankList.value = res.data
    loading.value = false
    animateItems()
  } catch (error) {
    showToast('获取榜单失败')
  }
}

const animateItems = () => {
  gsap.from('.rank-item', {
    opacity: 0,
    y: 50,
    duration: 0.8,
    stagger: 0.2,
    ease: 'back.out(1.7)'
  })
}

onMounted(() => {
  getRank()
})
</script>

<template>
  <div class="rank-page">
    <van-nav-bar
      title="发文榜"
      left-arrow
      @click-left="$router.back()"
    />
    
    <div class="rank-content" v-if="!loading">
      <div class="top-three">
        <div class="second-place" v-if="rankList[1]">
          <div class="avatar-wrapper">
            <img :src="rankList[1].avatar" class="avatar">
            <div class="rank">2</div>
          </div>
          <div class="info">
            <div class="username">{{ rankList[1].username }}</div>
            <div class="count">{{ rankList[1].count }}篇</div>
          </div>
        </div>
        
        <div class="first-place" v-if="rankList[0]">
          <div class="crown">👑</div>
          <div class="avatar-wrapper">
            <img :src="rankList[0].avatar" class="avatar">
            <div class="rank">1</div>
          </div>
          <div class="info">
            <div class="username">{{ rankList[0].username }}</div>
            <div class="count">{{ rankList[0].count }}篇</div>
          </div>
        </div>
        
        <div class="third-place" v-if="rankList[2]">
          <div class="avatar-wrapper">
            <img :src="rankList[2].avatar" class="avatar">
            <div class="rank">3</div>
          </div>
          <div class="info">
            <div class="username">{{ rankList[2].username }}</div>
            <div class="count">{{ rankList[2].count }}篇</div>
          </div>
        </div>
      </div>

      <div class="rank-list">
        <div 
          v-for="(item, index) in rankList.slice(3)" 
          :key="item.id"
          class="rank-item"
        >
          <div class="rank-number">{{ index + 4 }}</div>
          <img :src="item.avatar" class="avatar">
          <div class="info">
            <div class="username">{{ item.username }}</div>
            <div class="count">{{ item.count }}篇</div>
          </div>
        </div>
      </div>
    </div>

    <van-loading v-else type="spinner" vertical>加载中...</van-loading>
  </div>
</template>

<style scoped lang="scss">
.rank-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #FFB6C1, #87CEEB);
  padding-bottom: 20px;

  .rank-content {
    padding: 20px;
  }

  .top-three {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 30px;
    padding: 20px;

    .avatar-wrapper {
      position: relative;
      margin-bottom: 10px;

      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }

      .rank {
        position: absolute;
        bottom: -5px;
        right: -5px;
        width: 24px;
        height: 24px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
    }

    .first-place {
      transform: scale(1.2);
      margin: 0 20px;
      text-align: center;

      .crown {
        font-size: 24px;
        margin-bottom: 10px;
        animation: float 2s ease-in-out infinite;
      }

      .avatar-wrapper .avatar {
        width: 80px;
        height: 80px;
        border: 3px solid #FFD700;
      }
    }

    .info {
      text-align: center;
      color: #fff;

      .username {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .count {
        font-size: 12px;
        opacity: 0.8;
      }
    }
  }

  .rank-list {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 15px;

    .rank-item {
      display: flex;
      align-items: center;
      padding: 15px;
      margin-bottom: 10px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.3s;

      &:hover {
        transform: translateX(5px);
      }

      .rank-number {
        width: 24px;
        height: 24px;
        background: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-weight: bold;
        color: #666;
      }

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
      }

      .info {
        flex: 1;

        .username {
          font-weight: bold;
          margin-bottom: 4px;
        }

        .count {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style> 